<template>
	<view class="container">
		<!-- 头部轮播 -->
		<view class="destinationC">
			<view class="destinationCI">
				<img :src="listSwiperStr" alt="" />
				<view class="destinationCIT" :style="{'top':distanceToTop*2 + 'rpx'}">
					<noticePage></noticePage>
				</view>
			</view>
			<swiper class="destinationSwiper" circular :indicator-dots="indicatorDots" @change="changeSwiper"
				duration="1000" easingFunction="easeOutCubic">
				<swiper-item v-for="(item,index) in carouselList" :key="index" class="swiperItem"
					@click="goDetailsSwiper(item)">
					<view class="swiperItemI" :class="listSwiperStr==item.photo[0]?'photoC':'photoB'">
						<img :src="item.photo[0]" alt="" />
					</view>
				</swiper-item>
			</swiper>
		</view>
		<!-- 活动 -->
		<view class="activityDiv">
			<view class="activityDivL">
				<view class="activityDivLI">
					<img src="/static/home/ai.png" alt="" />
					<view class="activityDivLA">
						AI旅行助手
					</view>
				</view>
				<view class="activityDivLT">
					{{ displayedText }}
				</view>
				<view class="activityDivLTK">
					<img src="/static/home/kaishi.png" alt="" />
				</view>
			</view>
			<view class="activityDivR">
				<img src="https://img2.baidu.com/it/u=2600688028,338415735&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500"
					alt="" />
				<view class="activityDivRT">
					城市漫步
				</view>
			</view>
		</view>
		<!-- 崇礼印象 -->
		<view class="impression">
			<view class="impressionT">
				<h2>崇礼印象</h2>
				<span @click="goImpressionList">查看更多></span>
			</view>
			<cardStacking />
		</view>
		<!-- 今日活动 -->
		<view class="impression">
			<view class="impressionT">
				<h2>今日活动
					<span style="margin-left: 20rpx;">{{timeData[0]}}年{{timeData[1]}}月{{timeData[2]}}日</span>
				</h2>
				<!-- <span>查看更多></span> -->
			</view>
			<view class="activityDayDiv">
				<view class="activityDayDivItem" v-for="(item,index) in activityList" :key="index"
					@click="goActivityDetsils(item)">
					<view class="activityDayDivItemImg">
						<img :src="item.photo[0]" alt="" />
					</view>
					<view class="activityDayDivItemT">
						<view class="">
							{{item.name}}
						</view>
						<view class="activityDayDivItemTT">
							{{item.activityTime.join('~')}}
						</view>
						<view class="activityDayDivItemTT">
							{{item.address}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 攻略 -->
		<view class="arcTabsDiv">
			<view class="impressionT">
				<h2>推荐攻略</h2>
				<span @click="gosurroundings">查看更多></span>
			</view>
			<view class="arcTabsDivL">
				<view class="arcTabsDivLI" v-for="(item,index) in strategy" :key="index" @click="goDetails(item)">
					<img :src="item.photo[0]" alt="" />
					<view class="arcTabsDivLItem">
						<view class="arcTabsDivLItemH">{{item.title}}</view>
						<view class="arcTabsDivLItemT">
							<img v-if="item.profilePhoto" :src="item.profilePhoto" alt=""
								style="margin-right: 10rpx;" />
							<span v-if="item.nickName">{{item.nickName}}</span>
							<img v-if="item.distanceKm" src="/static/home/juli.png" alt="" />
							<span v-if="item.distanceKm">{{item.distanceKm}}km</span>
						</view>
					</view>
					<view class="arcTabsDivLType">
						{{item.type}}
					</view>
				</view>
			</view>
		</view>
		<!-- 新闻 -->
		<view class="newsDiv">
			<view class="impressionT">
				<h2>新闻</h2>
				<span @click="goNewsList">查看更多></span>
			</view>
			<u-tabs :list="newsTabsList" @click="newsTabsClick"></u-tabs>
			<view class="arcTabsDivL">
				<view class="arcTabsDivLI" v-for="(item,index) in newsList" :key="index" @click="goNewsDetails(item)">
					<view class="arcTabsDivLIImg">
						<img :src="item.thumbUrl" alt="" />
					</view>
					<view class="arcTabsDivLItem">
						<view class="arcTabsDivLItemH">{{item.title}}</view>
						<view class="arcTabsDivLItemTime">
							{{item.createTime}}
						</view>
						<view class="arcTabsDivLItemT">
							{{item.author}}
						</view>
					</view>
				</view>
			</view>
		</view>
		<!-- 必玩榜单 -->
		<view class="impression">
			<view class="impressionT">
				<h2>必玩榜单</h2>
			</view>
			<theCharts @lonLat="lonLat" />
		</view>
	</view>
</template>

<script>
	import {
		getIndexSlideshow,
		strategyList,
		activityList,
		newsList,
		slideshow
	} from '@/api/home.js'

	// 公告
	import noticePage from "../../components/noticePage.vue";
	// 崇礼印象
	import cardStacking from "../../components/cardStacking.vue";
	// 必玩榜单
	import theCharts from "../../components/theCharts.vue";
	export default {
		components: {
			noticePage,
			cardStacking,
			theCharts,
		},
		data() {
			return {
				// 胶囊距离顶部的距离
				distanceToTop: 0,
				// 轮播图的数据
				carouselList: [],
				// 轮播图背景图
				listSwiperStr: '',
				// 当前日期
				timeData: [],
				// 活动数量
				activityNum: 0,
				// 新闻
				newsTabsList: [{
					name: '新闻'
				}, {
					name: '热点'
				}],
				newsList: [],
				activityList: [],
				fullText: `Hi，我是您的崇礼文旅向导"崇小忆"，很乐意为您服务。`, // 需要展示的完整文字
				displayedText: "", // 当前已展示的文字
				currentIndex: 0, // 当前展示到的字符索引
				typingTimer: null, // 定时器
				//攻略
				strategy: [],
				newsType: '新闻'

			};
		},
		onLoad() {
			this.getSlideshow()
			this.timeData = this.$utils.formatDate()
			const menuButtonInfo = wx.getMenuButtonBoundingClientRect();
			this.distanceToTop = menuButtonInfo.top;
			this.getNewsList()
			this.getActivityList()
			this.startTyping()
		},
		onUnload() {
			// 页面卸载时清除定时器
			this.stopTyping();
		},
		methods: {
			goDetailsSwiper(item) {
				uni.navigateTo({
					url: `/pages/scenicAreaDetails/scenicAreaDetails?id=${item.id}&type=0`
				})
			},
			// 获取轮播图数据
			async getSlideshow() {
				let res = await slideshow()
				if (res.code == 200) {
					this.carouselList = res.data
					this.listSwiperStr = this.carouselList[0].photo[0]
				}
			},
			// 跳转到活动详情
			goActivityDetsils(item) {
				uni.navigateTo({
					url: `/pages/activityDetails/activityDetails?id=${item.id}`
				})
			},
			// 跳转到新闻详情
			goNewsDetails(item) {
				uni.navigateTo({
					url: `/pages/newsDetails/newsDetails?id=${item.id}`
				})
			},
			// 跳转到新闻列表
			goNewsList() {
				uni.navigateTo({
					url: '/pages/newsList/newsList'
				})
			},
			// 新闻标题点击
			newsTabsClick(item) {
				this.newsType = item.name
				this.getNewsList()
			},
			// 获取新闻列表
			async getNewsList() {
				let par = {
					title: '',
					type: this.newsType,
					pageNum: 1,
					pageSize: 4
				}
				let res = await newsList(par)
				if (res.code == 200) {
					this.newsList = res.data.records
				}
			},
			// 活动列表
			async getActivityList() {
				let par = {
					time: `${this.timeData[0]}-${this.timeData[1]}-${this.timeData[2]}`,
					type: '',
					pageNum: 1,
					pageSize: 3
				}
				let res = await activityList(par)
				if (res.code == 200) {
					this.activityList = res.data.list
				}
			},
			// 攻略点击更多
			gosurroundings() {
				uni.setStorageSync('surroundingsType', 1)
				uni.switchTab({
					url: '/pages/surroundings/surroundings'
				})
			},
			// 攻略详情
			goDetails(item) {
				if (item.type == '攻略') {
					uni.navigateTo({
						url: `/pages/strategyDetails/strategyDetails?id=${item.id}`
					})
				} else if (item.type == '景区') {
					uni.navigateTo({
						url: `/pages/scenicAreaDetails/scenicAreaDetails?id=${item.id}&type=0`
					})
				} else if (item.type == '酒店') {
					uni.navigateTo({
						url: `/pages/scenicAreaDetails/scenicAreaDetails?id=${item.id}&type=1`
					})
				} else if (item.type == '美食') {
					uni.navigateTo({
						url: `/pages/scenicAreaDetails/scenicAreaDetails?id=${item.id}&type=2`
					})
				}
			},
			// 排行榜过来的数据
			lonLat(lon, lat) {
				this.getStrategy(lon, lat)
			},
			async getStrategy(lon, lat) {
				let par = {
					lon: lon ? lon : null,
					lat: lat ? lat : null,
					pageNum: 1,
					pageSize: 4
				}
				let res = await strategyList(par)
				if (res.code == 200) {
					this.strategy = res.data.list
				}
			},
			// 文字逐渐显示
			startTyping() {
				// 每150ms展示一个字，可调整速度
				this.typingTimer = setInterval(() => {
					// 拼接下一个字符
					this.displayedText += this.fullText[this.currentIndex];
					this.currentIndex++;
					// 所有文字展示完毕，清除定时器
					if (this.currentIndex >= this.fullText.length) {
						this.stopTyping();
					}
				}, 150);
			},
			// 暂停展示
			stopTyping() {
				if (this.typingTimer) {
					clearInterval(this.typingTimer);
					this.typingTimer = null;
				}
			},
			// 点击今日活动列表的收藏
			cligkIcon(item, num) {
				if (num == 1) {
					console.log(item, '收藏');
				} else {
					console.log(item, '定位');
				}
			},
			// 跳转去崇礼印象列表
			goImpressionList() {
				uni.navigateTo({
					url: '/pages/impressionList/impressionList'
				})
			},


			//轮播图切换
			changeSwiper(e) {
				this.listSwiperStr = this.carouselList[e.detail.current].photo[0]
			},
		}
	}
</script>

<style lang="scss">
	// 今日活动
	.activityDayDiv {
		width: 100%;
		margin-top: 20rpx;
		margin-bottom: 40rpx;

		.activityDayDivItem {
			width: 100%;
			padding: 10rpx 20rpx;
			margin-bottom: 20rpx;
			display: flex;
			gap: 20rpx;

			.activityDayDivItemT {
				display: flex;
				flex-direction: column;
				gap: 10rpx;

				.activityDayDivItemTI {
					display: flex;
					align-items: center;
				}

				.activityDayDivItemTT {
					font-size: 24rpx;
					color: #666666;
				}
			}


			.activityDayDivItemImg {
				min-height: 200rpx;

				img {
					width: 160rpx;
					height: 100%;
					border-radius: 20rpx;
				}
			}
		}
	}

	// 新闻
	.newsDiv {
		padding: 0 20rpx;
		margin-bottom: 40rpx;

		.arcTabsDivL {
			margin-top: 30rpx;

			.arcTabsDivLI {
				width: 100%;
				padding: 10rpx;
				background: rgba(255, 255, 255, 0.2);
				border-radius: 0 0 20rpx 20rpx;
				backdrop-filter: blur(10rpx);
				-webkit-backdrop-filter: blur(10rpx);
				box-shadow: 0 0 0 1rpx rgba(31, 38, 135, 0.15);
				border-radius: 12rpx;
				margin-bottom: 20rpx;
				display: flex;
				gap: 20rpx;

				.arcTabsDivLItem {
					width: 63%;

					.arcTabsDivLItemTime {
						font-size: 26rpx;
						margin: 10rpx 0;
						color: #666666;
					}

					.arcTabsDivLItemH {
						font-size: 36rpx;
					}

					.arcTabsDivLItemT {
						font-size: 24rpx;
						float: right;
						color: #666666;
					}
				}

				.arcTabsDivLIImg {
					min-height: 160rpx;

					img {
						width: 240rpx;
						height: 100%;
						border-radius: 12rpx;
					}
				}

			}

		}

		.impressionT {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 40rpx;

			h2 {
				font-weight: bold;
			}

			span {
				font-weight: 400;
				font-size: 26rpx;
			}
		}
	}

	// 崇礼印象
	.impression {
		padding: 0 20rpx;

		.impressionT {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 40rpx;

			h2 {
				font-weight: bold;
			}

			span {
				font-weight: 400;
				font-size: 26rpx;
			}
		}
	}

	// 攻略
	.arcTabsDiv {
		width: 100%;
		margin-bottom: 40rpx;
		padding: 0 20rpx;

		.impressionT {
			display: flex;
			align-items: center;
			justify-content: space-between;
			font-size: 40rpx;

			h2 {
				font-weight: bold;
			}

			span {
				font-weight: 400;
				font-size: 26rpx;
			}
		}

		.arcTabsDivL {
			width: 100%;
			display: flex;
			margin-top: 20rpx;
			flex-wrap: wrap;
			justify-content: space-between;

			.arcTabsDivLI {
				width: 49%;
				margin-bottom: 20rpx;
				display: flex;
				align-items: center;
				justify-content: center;
				position: relative;

				.arcTabsDivLType {
					position: absolute;
					background-color: #fff;
					padding: 10rpx;
					border-radius: 0 18rpx 0 20rpx;
					top: 0;
					right: 0;
					font-size: 20rpx;
				}

				.arcTabsDivLItem {
					position: absolute;
					bottom: 0;
					width: 100%;
					min-height: 80rpx;
					background: rgba(255, 255, 255, 0.2);
					border-radius: 0 0 20rpx 20rpx;
					backdrop-filter: blur(10px);
					-webkit-backdrop-filter: blur(10px);
					padding: 10rpx 20rpx;

					.arcTabsDivLItemH {
						display: -webkit-box;
						/* 弹性盒模型，用于配合 line-clamp */
						-webkit-line-clamp: 2;
						/* 限制显示的行数 */
						-webkit-box-orient: vertical;
						/* 设置盒子内子元素的排列方向为垂直 */
						overflow: hidden;
						/* 超出部分隐藏 */
						text-overflow: ellipsis;
						/* 超出部分显示省略号 */
						font-size: 30rpx;
						color: #ffffff;
					}

					.arcTabsDivLItemT {
						display: flex;
						align-items: center;
						margin-top: 10rpx;

						span {
							font-size: 24rpx;
							color: #ffffffbf;
						}

						img {
							width: 40rpx;
							height: 40rpx;
							border-radius: 50%;
						}
					}
				}

				img {
					width: 100%;
					height: 500rpx;
					border-radius: 20rpx;
				}
			}
		}
	}

	// 活动
	.activityDiv {
		width: 100%;
		margin: 40rpx 0 40rpx;
		display: flex;
		align-items: center;
		justify-content: space-between;
		padding: 0 20rpx;

		.activityDivR {
			width: 49%;
			height: 300rpx;
			position: relative;

			.activityDivRT {
				position: absolute;
				bottom: 20rpx;
				left: 20rpx;
				color: #ffffff;
				font-size: 40rpx;
			}

			img {
				border-radius: 20rpx;
				width: 100%;
				height: 100%;
			}
		}

		.activityDivL {
			width: 49%;
			height: 300rpx;
			position: relative;
			border-radius: 20rpx;
			/* 透明边框（预留空间） */
			border: 4rpx solid transparent;
			/* 关键：背景裁剪到边框盒子 */
			background-clip: padding-box, border-box;
			background-origin: padding-box, border-box;
			/* 第一层背景：内容区背景（白色）；第二层背景：边框渐变 */
			background-image: linear-gradient(to bottom right, #e1f0fc, #edfcf4),
				linear-gradient(135deg, #e1f0fc, #e1f0fc);

			.activityDivLTK {
				width: 80%;
				height: 90rpx;
				margin: 0 auto 20rpx;

				img {
					width: 100%;
					height: 100%;
				}
			}

			.activityDivLT {
				margin-top: 10rpx;
				width: 100%;
				padding: 0 20rpx;
				font-size: 24rpx;
				height: 110rpx;
			}

			.activityDivLI {
				display: flex;
				align-items: flex-end;
				gap: 20rpx;

				.activityDivLA {
					height: 40rpx;
					padding: 5rpx 10rpx;
					background-color: #ffffff;
					font-size: 22rpx;
					border-radius: 20rpx;
					color: #9189ff;
				}

				img {
					border-radius: 20rpx;
					width: 80rpx;
					height: 80rpx;
					margin-top: -10rpx;
					margin-left: 30rpx;
				}
			}



		}
	}

	/* 头部 轮播图 */
	.destinationC {
		width: 100%;

		.destinationSwiper {
			width: 100%;
			height: 600rpx;
			margin-top: -370rpx;

			.swiperItem {
				max-width: 630rpx !important;
				padding: 0 0 0 20rpx;

				.photoB {
					transform: scale(0.9);
					transform-origin: center;
				}

				.photoC {
					transform: scale(1);
					transform-origin: center;
				}

				.swiperItemI {
					width: 100%;
					position: relative;
					transition: transform 0.3s ease;

					img {
						border-radius: 20rpx;
						width: 100%;
						height: 600rpx;
					}
				}

			}
		}

		.destinationCI {
			position: relative;
			display: flex;
			align-items: center;
			width: 100%;

			.destinationCIT {
				width: 70%;
				position: absolute;
				left: 20rpx;
				background-color: #ffffff4d;
				padding: 0 10rpx;
				border-radius: 30rpx;
			}

			img {
				opacity: 0.5;
				width: 100%;
				height: 600rpx;
			}
		}
	}

	.container {
		padding-bottom: 100rpx;
	}

	page {
		background-color: #fff;
	}
</style>